<script>
import Api from "@/api";
import axios from "axios";
import WaterLevelBase from "./components/WaterLevelBase.vue";
import LeftPanels from "./components/LeftPanels.vue";
import CountAndTreeComponent from "./components/count-and-tree-component/index.vue";
import WaterLevelScale from "./components/WaterLevelScale.vue";
import eventBus from "@/utils/eventBus.js";
import { toRaw } from "@vue/reactivity";
import SupermapLegend from "@/components/SupermapLegend/index.vue";
//import { merge as LodashMerge, maxBy as LodashMaxBy } from "lodash";
import {
  merge as LodashMerge,
  maxBy as LodashMaxBy,
  sortBy as LodashSortBy,
  chunk as Lodashchunk,
  minBy as LodashMinBy,
  sum as LodashSum,
} from "lodash";

import Cddir from './files/水道字典.json';
let LeafletMapIns = undefined;
let TempLayer = null;
let HeatMapLayer = null;
let EchartsLayer = null;
let ChartIns2;
const myRenderer = L.svg({ padding: 0.1 });
let DemarcationPoint = null;
let legendDataOfOpenStatus = [
  {
    value: "通畅",
    style: "rgb(0,  255,  0)",
    detail: `
      <p>通行环境状况异常持续时长T C1（d）=0；</p>
      <p>通行环境状况严重异常持续时长T C2（d）=0</p>
    `
  },
  {
    value: "较畅",
    style: "rgb(255,  255,  0)",
    detail: `
      <p>通行环境状况异常持续时长0<T C1（d）≦7；</p>
      <p>通行环境状况严重异常持续时长0<T C2（d）≦0.5</p>
    `
  }, {
    value: "拥堵",
    style: "rgb(255,  165,  0)",
    detail: `
      <p>通行环境状况异常持续时长T C1（d）>7；</p>
      <p>通行环境状况严重异常持续时长0.5<T C2（d）≦1</p>
    `
  }, {
    value: "阻塞",
    style: "rgb(255,  0,  0)",
    detail: `<p>通行环境状况严重异常持续时长T C2（d）>1</p>`
  }
]
let legendDataOfEquipStatus = [
  {
    value: "好",
    style: "rgb(0,  255,  0)",
    detail: `
    <p>航道尺度异常持续时长T C3（d）=0；</p>
    <p>航道尺度严重异常持续时长T C4（d）=0；</p>
    <p>山区河流航标异常率0≦α≦5%，平原河流航标异常率0≦ɑ≦3%；</p>
    <p>航道整治建筑物异常率β=0；</p>
    `
  },
  {
    value: "一般",
    style: "rgb(255,  255,  0)",
    detail: `
      <p>航道尺度异常持续时长0<T C3（d）≦7；</p>
      <p>航道尺度严重异常持续时长0<T C4（d）≦3；</p>
      <p>山区河流航标异常率5%<α≦30%，平原河流航标异常率3%<α≦10%；</p>
      <p>航道整治建筑物异常率0<β≦10%；</p>
    `
  }, {
    value: "较差",
    style: "rgb(255,  165,  0)",
    detail: `
      <p>航道尺度异常持续时长T C3（d）>7；</p>
      <p>航道尺度严重异常持续时长3<T C4（d）≦7；</p>
      <p>山区河流航标异常率30%<α≦50%，平原河流航标异常率10%<α≦20%；</p>
      <p>航道整治建筑物异常率10%<β≦30%；</p>
    `
  }, {
    value: "差",
    style: "rgb(255,  0,  0)",
    detail: `
      <p>航道尺度严重异常持续时长T C4（d）>7；</p>
      <p>山区河流航标异常率α>50%，平原河流航标异常率α>20%；</p>
      <p>航道整治建筑物异常率β>30%；</p>
    `
  }
]
export default {
  name: "DataInit",
  components: { WaterLevelBase, CountAndTreeComponent, WaterLevelScale, LeftPanels, SupermapLegend },
  data() {
    return {
      showLegend: false,
      legendData: [],
      dataIsRequesting: false,
      featureGroup: null,
      slideGroup: null,
      divCover: null,
      resolutions: null,
      start_zoom: null,
      cj_qd: null,
      cj_zd: null,
      divCovData: {
        sum: null,
        qd: null,
        zd: null,
        sum_dz: null,
      },
      cities: [
        {
          name: "宜宾",
          officeName: "航道局",
        },
        {
          name: "泸州",
          officeName: "航道局",
        },
        {
          name: "重庆",
          officeName: "航道局",
        },
        {
          name: "涪陵",
          officeName: "航道处",
        },
        {
          name: "万州",
          officeName: "航道处",
        },
        {
          name: "宜昌",
          officeName: "航道局",
        },
        {
          name: "荆州",
          officeName: "航道处",
        },
        {
          name: "岳阳",
          officeName: "航道处",
        },
        {
          name: "武汉",
          officeName: "航道局",
          isActive: true,
        },
        {
          name: "九江",
          officeName: "航道处",
        },
        {
          name: "芜湖",
          officeName: "航道处",
        },
        {
          name: "南京",
          officeName: "航道局",
        },
        {
          name: "镇江",
          officeName: "航道处",
        },
        {
          name: "上海",
          officeName: "航道处",
        },
      ],
      // 水位数据
      waterLevelData: [],
      allSWData: [],
      leftPanelIsActive: false,
      radio: "上游",
      swzList: [],
      hdtData: [],
      dialogVisible: false,
      hdfj_json: null,
      color: ["#3ae6ff", "#64fb52", "#fecc37", "#fccc30"],
      craeteEcharts: [
        { name: "宜宾航道局", value: 0 },
        { name: "泸州航道局", value: 0 },
        { name: "重庆航道局", value: 0 },
        { name: "涪陵航道处", value: 0 },
        { name: "万州航道处", value: 0 },
        { name: "宜昌航道局", value: 0 },
        { name: "荆州航道处", value: 0 },
        { name: "岳阳航道处", value: 0 },
        { name: "武汉航道局", value: 0 },
        { name: "九江航道处", value: 0 },
        { name: "芜湖航道处", value: 0 },
        { name: "南京航道局", value: 0 },
        { name: "镇江航道处", value: 0 },
        { name: "上海航道处", value: 0 },
      ],
      // 船舶热力图开关
      // valueOfShipBoat: false,
      loading: true,
      diaTile: "",
      hdcdfj: {
        宜宾: [[0], ["宜宾（合江门）", "江安（白沙湾）"], 0, [0, 1]],
        泸州: [[1], ["朱沱（汉东村）", "泸州（麻沙桥）"], 1, [2]],
        重庆: [
          [2, 3],
          ["嘉陵江（北碚）", "重庆（寸滩）", "江津（猪圈门）"],
          2,
          [3],
        ],
        涪陵: [[4], ["长寿（小石溪）", "涪陵（白鹤梁）"], 3, [4]],
        万州: [[5], ["万州（红花地）"], 4, [5]],
        宜昌: [
          [6, 7, 8, 9, 10],
          [
            "秭归（郭家坝）",
            "宜昌（中水门）",
            "车阳河（关洲）",
            "枝江（李家渡）",
          ],
          5,
          [6, 7],
        ],
        荆州: [
          [11],
          ["沙市（杨陵矶）", "郝穴（航道码头）", "石首（航道码头）"],
          6,
          [8],
        ],
        岳阳: [[12], ["监利（泳协码头）", "城陵矶（岳阳关）"], 7, [9]],
        武汉: [
          [13, 14],
          ["莫家河（嘉鱼大桥）", "汉口（武汉关）", "黄石（黄石大桥）"],
          8,
          [10],
        ],
        九江: [[14], ["九江（航道码头）"], 9, [16]],
        芜湖: [
          [15, 16],
          [
            "安庆（马窝）",
            "铜陵（外贸码头）",
            "芜湖（芜湖大桥）",
          ],
          10,
          [11],
        ],
        南京: [[17, 18], ["南京（下关）"], 11, [12]],
        镇江: [[19], ["镇江（定易洲）"], 12, [13]],
        上海: [[20], ["丹华港"], 13, [14, 15]],
      },
    };
  },
  mounted() {
    const that = this;
    this.$store.commit("LIST_STATUS_LAYER", { list_icon: true, list_panel: true });
    if (LeafletMapIns && TempLayer) {
      LeafletMapIns.removeLayer(TempLayer);
      TempLayer = null;
    }
    this.initMap();
    this.getHdswz();
    this.getHDT();
    eventBus.on("setAnaDataOfReal", this.initChartsForLeftReal);
    eventBus.on("setAnaDataOfDesigned", this.initChartsForLeftDesigned);
    eventBus.on("requestDataForLeaflet", ({ tag }) => {
      that.dataIsRequesting = tag;
    });
    eventBus.on("toggleDemarcationPoint", ({ tag }) => {
      DemarcationPoint &&
        DemarcationPoint.eachLayer((v) => {
          v && v.setOpacity(tag ? 1 : 0.1);
        });
    });
    eventBus.on("showLegendOfL1", ({ tag, section }) => {
      if (!tag) {
        this.showLegend = false;
        this.legendData = [];
        return
      } else {
        this.showLegend = true;
        switch (section) {
          case 'open-status':
            this.legendData = legendDataOfOpenStatus;
            break;
          case 'equip-status':
            this.legendData = legendDataOfEquipStatus;
            break;
          default:
            this.showLegend = false;
            this.legendData = [];
        }
      }
    })

    if (window.Pop3DInsForWaterDeepCheck) {
      console.log("销毁了");
      window.Pop3DInsForWaterDeepCheck.close();
    }
  },
  computed: {
    valueOfShipBoat() {
      return this.$store.state.heatMapSwitchOfShip;
    },
  },
  watch: {
    // 热力图数据
    valueOfShipBoat(v) {
      if (v) {
        this.addHeatMapLayer();
      } else {
        this.removeHeatMapLayer();
      }
    },
  },
  beforeUnmount() {
    if (LeafletMapIns && TempLayer) {
      LeafletMapIns.removeLayer(TempLayer);
      TempLayer = null;
    }

    eventBus.off("setAnaDataOfReal");
    eventBus.off("setAnaDataOfDesigned");
    eventBus.off("requestDataForLeaflet");
    eventBus.off("toggleDemarcationPoint");
  },
  methods: {
    getHDT() {
      const that = this;
      // 默认数据
      const defaultData = {
        c: 0,
        d: {
          yjh: [
            {
              id: "25137d1c26a34c1f8d19d6dd876b6587",
              qdjc: "合江门",
              zdjc: "王爷庙",
              qdwz: 0.0,
              zdwz: 40.0,
              jhss: 3.2,
              jhss2: 3.2,
              ybss: "3.5",
              ybhk: "60.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            {
              id: "8692d0ed20574efa9b0db01d536f48ae",
              qdjc: "王爷庙",
              zdjc: "兰家沱",
              qdwz: 40.0,
              zdwz: 200.8,
              jhss: 3.2,
              jhss2: 3.2,
              ybss: "3.5",
              ybhk: "60.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            {
              id: "e403335bc82a4b0f88e6fbfa432cdb7a",
              qdjc: "兰家沱",
              zdjc: "娄溪沟",
              qdwz: 200.8,
              zdwz: 250,
              jhss: 3.2,
              jhss2: 3.2,
              ybss: "3.5",
              ybhk: "60.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            {
              id: "e403335bc82a4b0f88e6fbfa432cdb7f",
              qdjc: "娄溪沟",
              zdjc: "羊角滩",
              qdwz: 250,
              zdwz: 300,
              jhss: 3.2,
              jhss2: 3.2,
              ybss: "3.5",
              ybhk: "60.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            {
              id: "3b3b3e756e2e4b2090e272c1c4814636",
              qdjc: "羊角滩",
              zdjc: "李渡大桥",
              qdwz: 300,
              zdwz: 334.8,
              jhss: 3.5,
              jhss2: 3.5,
              ybss: "5.0",
              ybhk: "100.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            {
              id: "7a56989abb104053ac7d6a37cb847479",
              qdjc: "李渡大桥",
              zdjc: "庙河",
              qdwz: 334.8,
              zdwz: 930.0,
              jhss: 5.5,
              jhss2: 5.5,
              ybss: "5.5",
              ybhk: "150.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            {
              id: "7a56989abb104053ac7d6a37cb847471",
              qdjc: "葛洲坝三江水道",
              zdjc: "王家沟",
              qdwz: 970,
              zdwz: 1000,
              jhss: 5.5,
              jhss2: 5.5,
              ybss: "5.5",
              ybhk: "150.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            {
              id: "7a56989abb104053ac7d6a37cb847472",
              qdjc: "葛洲坝大江水道",
              zdjc: "巷子口",
              qdwz: 1000,
              zdwz: 1040,
              jhss: 5.5,
              jhss2: 5.5,
              ybss: "5.5",
              ybhk: "150.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            {
              id: "7a56989abb104053ac7d6a37cb847473",
              qdjc: "三峡船闸水道",
              zdjc: "三峡大坝上游禁航线",
              qdwz: 930,
              zdwz: 940,
              jhss: 5.5,
              jhss2: 5.5,
              ybss: "5.5",
              ybhk: "150.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            {
              id: "7a56989abb104053ac7d6a37cb847474",
              qdjc: "三峡升船机水道",
              zdjc: "三峡大坝上游禁航线",
              qdwz: 940,
              zdwz: 970,
              jhss: 5.5,
              jhss2: 5.5,
              ybss: "5.5",
              ybhk: "150.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            {
              id: "5708ddde7abd4e79857612768a3d5999",
              qdjc: "中水门",
              zdjc: "跨宝山",
              qdwz: 1040,
              zdwz: 1070,
              jhss: 4.5,
              jhss2: 4.5,
              ybss: "4.5",
              ybhk: "100.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            {
              id: "7edbceb74f2b4719b90c83ce83bca50d",
              qdjc: "跨宝山",
              zdjc: "荆州四码头",
              qdwz: 1070,
              zdwz: 1132.0,
              jhss: 4.5,
              jhss2: 4.5,
              ybss: "4.5",
              ybhk: "100.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            {
              id: "ea5313869cd24fb08e84981a8b8d81f2",
              qdjc: "荆州四码头",
              zdjc: "城陵矶",
              qdwz: 1132.0,
              zdwz: 1300.0,
              jhss: 4.5,
              jhss2: 4.5,
              ybss: "5.5",
              ybhk: "150.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            {
              id: "f25498fd8a55461b93263262b5ddeb6a",
              qdjc: "城陵矶",
              zdjc: "武汉长江大桥",
              qdwz: 1300.0,
              zdwz: 1487.5,
              jhss: 4.5,
              jhss2: 4.5,
              ybss: "6.0",
              ybhk: "160.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            {
              id: "0c2a63048daa4d148861500b621191d5",
              qdjc: "武汉长江大桥",
              zdjc: "吉阳矶",
              qdwz: 1487.5,
              zdwz: 1820.2,
              jhss: 6,
              jhss2: 6,
              ybss: "6.0",
              ybhk: "200.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            {
              id: "a81c260f23904e1bada3099773dc0f6a",
              qdjc: "吉阳矶",
              zdjc: "高安圩",
              qdwz: 1820.2,
              zdwz: 1984.2,
              jhss: 6,
              jhss2: 6,
              ybss: "6.0",
              ybhk: "200.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            {
              id: "98131457d2344ac1973f26b5a53ecce0",
              qdjc: "高安圩",
              zdjc: "芜湖长江大桥",
              qdwz: 1984.2,
              zdwz: 2105.2,
              jhss: 7.5,
              jhss2: 7.5,
              ybss: "8.2",
              ybhk: "400.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            {
              id: "fed4833a87f24fe39a69795e4edb219d",
              qdjc: "芜湖长江大桥",
              zdjc: "燕子矶",
              qdwz: 2105.2,
              zdwz: 2156.2,
              jhss: 9,
              jhss2: 9,
              ybss: "9.5",
              ybhk: "210.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            {
              id: "fbe6667163d64f17999ed9c0ccb9737f",
              qdjc: "燕子矶",
              zdjc: "新生圩",
              qdwz: 2156.2,
              zdwz: 2181.8,
              jhss: 10.8,
              jhss2: 10.8,
              ybss: "10.8",
              ybhk: "230.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            {
              id: "5e88270b77ac4d14a54faaedc06d5104",
              qdjc: "新生圩",
              zdjc: "江阴长江大桥",
              qdwz: 2181.8,
              zdwz: 2351.8,
              jhss: 12.5,
              jhss2: 12.5,
              ybss: "12.5",
              ybhk: "230.0",
              hd_zjsp: "3",
              cdyj_num: 0,
              ybzc: 21,
              ybks: "2023-05-20",
              ybjs: "2023-05-26",
              cdyjxx: [],
              sccd_lst: [],
            },
            // {
            //   id: "5e88270b77ac4d14a54faaedc06d5104",
            //   qdjc: "江阴长江大桥",
            //   zdjc: "浏河口",
            //   qdwz: 2351.8,
            //   zdwz: 2447.8,
            //   jhss: 12.5,
            //   jhss2: 12.5,
            //   ybss: "12.5",
            //   ybhk: "230.0",
            //   hd_zjsp: "3",
            //   cdyj_num: 0,
            //   ybzc: 21,
            //   ybks: "2023-05-20",
            //   ybjs: "2023-05-26",
            //   cdyjxx: [],
            //   sccd_lst: [],
            // },
          ],
        },
      };
      // 补充江阴长江大桥——————浏河口
      // 最新接口已经将该数据添加
      let BcLhk = {
        "qdwz": null,
        "hdmc": null,
        "sd_data": [
          {
            "焦山": [
              {
                "hdkd": 350,
                "hdss": 12.5
              }
            ]
          },
          {
            "丹徒直": [
              {
                "hdkd": 250,
                "hdss": 12.5
              }
            ]
          },
          {
            "口岸直": [
              {
                "hdkd": 450,
                "hdss": 12.5
              }
            ]
          },
          {
            "福姜沙中": [
              {
                "hdkd": 420,
                "hdss": 12.5
              }
            ]
          },
          {
            "福姜沙北": [
              {
                "hdkd": 260,
                "hdss": 12.5
              }
            ]
          }
        ],
        "hdkd": null,
        "ybks": "2023-08-05",
        "ybzc": 32,
        "ybjs": "2023-08-11",
        "hdcd": null,
        "jhss": 12.5,
        "hd_zjsp": null,
        "ybss": "12.5",
        "jhss2": null,
        "ybhk": "260",
        "zdwz": null,
        "wqbj": null,
        "qdjc": "新生圩",
        "cdyj_num": 0,
        "id": 32,
        "zdjc": "江阴长江大桥，浏河口"
      }
      //更新航道尺度数据
      Api.getDimenOfChannelData().then((res) => {
        if (res.data.data.length > 0) {
          let gxshuju = res.data.data;
          const hdInfo = defaultData.d?.yjh || [];
          for (let i = 0; i < hdInfo.length; i++) {
            hdInfo[i].sd_data = null;
          }
          if (hdInfo && hdInfo.length > 0) {
            if (hdInfo.length == gxshuju.length) {
              hdInfo.map((o, index) => {
                // 预报水深
                o.ybss = gxshuju[index].ybss;
                // 预报航宽
                o.ybhk = gxshuju[index].ybhk;
                o.sd_data = gxshuju[index].sd_data != null ? gxshuju[index].sd_data : []
                o.cdyj_num =
                  gxshuju[index].cdyj_num == null ||
                    gxshuju[index].cdyj_num == undefined
                    ? 0
                    : gxshuju[index].cdyj_num;
              });
            } else {
              console.log("航道尺度数据不一致");
            }
          }
          //获取水位预警站点
          let cdyjsz = []
          for (let i = 0; i < hdInfo.length; i++) {
            for (let j = 0; j < hdInfo[i].sd_data.length; j++) {
              for (let hname in hdInfo[i].sd_data[j]) {
                cdyjsz.push([hname, i, 0])
              }
            }
          }
          //根据json替换站点名称为ID
          for (let i = 0; i < cdyjsz.length; i++) {
            if (cdyjsz[i][0] == "江心洲（何家洲夹江）") {
              cdyjsz[i][0] = "江心洲"
            }
            for (let j = 0; j < Cddir.RECORDS.length; j++) {
              if (Cddir.RECORDS[j].SDMC.includes(cdyjsz[i][0])) {

                cdyjsz[i][0] = Cddir.RECORDS[j].ID
              }
            }
          }

          //获取预警
          let timenow = new Date(Date.now());
          timenow.setDate(timenow.getDate() - 6);
          let y = timenow.getFullYear(), m = timenow.getMonth() + 1, d = timenow.getDate();
          let time_str = y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + "00:00:00";
          if (window.SUPER_GIS_SPACE.isMockData) {
            Api.getDataByConfigApiHDTCD().then(res => {
              let res_yjsj = res.data.data;
              if (res_yjsj.length > 0) {
                for (let i = 0; i < res_yjsj.length; i++) {
                  for (let j = 0; j < cdyjsz.length; j++) {
                    //cdyjsz[j][2] = 1;//测试预警专用
                    if (res_yjsj[i].HD_ID == cdyjsz[j][0]) {
                      if (res_yjsj[i].HD_YJDJ == "1" && res_yjsj[i].SCBJ != "1") {
                        cdyjsz[j][2] = 1;
                      }
                    }
                  }
                }
              }
              hdInfo.map((o, index) => {
                o.cdyj_num = cdyjsz[index][2]
              })

              that.initData(defaultData);
            })
          } else {
            Api.getDataByConfigApi({ "cfgName": "电子航道图中心-尺度预警数据", "map": { "time_b": time_str } }).then(res => {
              let res_yjsj = res.data.data;
              if (res_yjsj.length > 0) {
                for (let i = 0; i < res_yjsj.length; i++) {
                  for (let j = 0; j < cdyjsz.length; j++) {
                    //cdyjsz[j][2] = 1;//测试预警专用
                    if (res_yjsj[i].HD_ID == cdyjsz[j][0]) {
                      if (res_yjsj[i].HD_YJDJ == "1" && res_yjsj[i].SCBJ != "1") {
                        cdyjsz[j][2] = 1;
                      }
                    }
                  }
                }
              }
              hdInfo.map((o, index) => {
                o.cdyj_num = cdyjsz[index][2]
              })

              that.initData(defaultData);
            })
          }


        } else {
          that.initData(defaultData);
        }
      });
    },
    clac_start_zoom() {
      //计算地图初始zoom
      this.resolutions = [];
      for (var z = 0; z < 17; ++z) {
        this.resolutions[z] = 156543.033928041 / Math.pow(2, z); //对应坐标系下的<Resolution>1.4062499999999993</Resolution>
      }
      //1822270为长江长度
      let start_sc = 1822270 / window.innerWidth;
      for (let i = 0; i < 17; i++) {
        if (start_sc > this.resolutions[i]) {
          this.start_zoom = i - 1;
          break;
        }
      }
      //计算长江宽度比
      let cj_width = 1822270 / this.resolutions[this.start_zoom];
      //计算长江起点（屏幕内）
      this.cj_qd = window.innerWidth / 2 - cj_width / 2;
      this.cj_zd = window.innerWidth / 2 + cj_width / 2;
    },
    initData(res) {
      const that = this;
      const hdInfo = res.d?.yjh || [];
      if (hdInfo && hdInfo.length > 0) {
        that.hdtData = hdInfo.map((o) => {

          const colorgz = function () {
            //根据不同数据显示不同颜色的标记
            if (o["ybss"] >= 0 && o["ybss"] < 4) {
              return "#e6f7ff";
            } else if (o["ybss"] >= 4 && o["ybss"] < 5) {
              return "#bae7ff";
            } else if (o["ybss"] >= 5 && o["ybss"] < 6) {
              return "#91d5ff";
            } else if (o["ybss"] >= 6 && o["ybss"] < 7) {
              return "#69c0ff";
            } else if (o["ybss"] >= 7 && o["ybss"] < 9) {
              return "#40a9ff";
            } else if (o["ybss"] >= 9 && o["ybss"] <= 100) {
              return "#1890ff";
            }
          };
          //设置预警颜色
          const color_yj = function () {
            if (o["cdyj_num"] == 0) {
              return "";
            } else if (o["cdyj_num"] > 0) {
              return "#f5222d";
            }
          };
          const coloryj = color_yj();
          const color = colorgz();
          return [
            o.qdwz,
            o.zdwz,
            Number(o.ybss),
            o.qdjc,
            color,
            o,
            Number(o.ybhk),
            o.cdyj_num,
            Number(((o.zdwz * 1000 - o.qdwz * 1000) / 1000).toFixed(2)),
            o.qdjc + "-" + o.zdjc,
            coloryj,
          ];
        });
        that.$nextTick(() => {
          that.$refs["WaterLevelScale"].initChart();
        });
      }
    },
    getHdswz() {
      Api.getHdswz().then((res) => {
        this.swzList = res;
        this.getAllAreaWaterLevel();
      });
    },
    // 获取全域水位的信息
    getAllAreaWaterLevel() {
      const isMockData = window.SUPER_GIS_SPACE.isMockData;
      if (isMockData) {
        this.$nextTick(() => {
          this.initWaterLevelLine();
        });
      } else {
        Api.getAllAreaWaterLevel().then((res) => {
          const data = res.d.results;
          this.allSWData = data;
          this.initWaterLevelLine();
        });
      }
    },
    // 初始化地图
    initMap() {
      this.clac_start_zoom();
      const centerLat = 31.11888515259;
      const centerLng = 113.07386228154687
      window.LeafletMapInsOfL1 = LeafletMapIns = L.map("Map-ChangJiang", {
        crs: L.CRS.EPSG3857,
        zoomControl: false,
        // 确定中心点
        //  缩放级别最小为 7, 最大为 10
        center: [centerLat, centerLng],
        zoom: this.start_zoom,
        minZoom: 7,
        maxZoom: 16,
        maxBounds: L.latLngBounds(
          L.latLng(centerLat - 4, centerLng - 10),
          L.latLng(centerLat + 3, centerLng + 10)
        ),
      });
      // LeafletMapIns.dragging.disable();
      // LeafletMapIns.scrollWheelZoom.disable();

      // new L.supermap.TiledMapLayer(urlChina).addTo(LeafletMapIns);
      /* new L.supermap.TiledMapLayer("http://172.18.10.104:8090/iserver/services/map-China400/rest/maps/ChinaDark4326").addTo(LeafletMapIns);
      new L.supermap.TiledMapLayer("http://172.18.10.104:8090/iserver/services/map-ChangJiangGanXianGaiLan/rest/maps/%E9%95%BF%E6%B1%9F%E5%B9%B2%E7%BA%BF%E9%A2%84%E8%A7%88").addTo(LeafletMapIns); */
      //this.addWMTSLayer(window.SUPER_GIS_SPACE.imagecyOfLeafletChinaDark, 'ChinaDark4326', 'Custom_ChinaDark4326', 0);
      new L.supermap.tiledMapLayer(
        window.SUPER_GIS_SPACE.imagecyLeafletRestChinaDark,
        { subdomains: [20001, 10002, 10003, 10004, 10005] }
      ).addTo(LeafletMapIns);
      //this.addWMTSLayer(window.SUPER_GIS_SPACE.imagecyOfLeafletChinaDark, 'ChinaDark', 'GoogleMapsCompatible_ChinaDark', 0);
      this.addWMTSLayer(
        window.SUPER_GIS_SPACE.imagecyOfLeafletRiver,
        "长江干线",
        "GoogleMapsCompatible_长江干线",
        0
      );
      // this.addWMTSLayer(window.SUPER_GIS_SPACE.imagecyOfLeafletRiver, '长江干线预览', 'GoogleMapsCompatible_长江干线预览', 1);
      // this.addWMTSLayer(window.SUPER_GIS_SPACE.imagecyOfLeafletRiver, '长江干线预览_标注', 'GoogleMapsCompatible_长江干线预览_标注', 2);
      // this.addWMTSLayer(window.SUPER_GIS_SPACE.imagecyOfLeafletRiver, '长江干线预览_分界点', 'GoogleMapsCompatible_长江干线预览_分界点', 3);
      if (this.valueOfShipBoat) {
        this.addHeatMapLayer();
      }
      this.featureGroup = L.featureGroup().addTo(LeafletMapIns);
      this.slideGroup = L.featureGroup().addTo(LeafletMapIns);
      this.addOfficeNameAndPos();
      const sqlParam_fenj = new L.supermap.GetFeaturesBySQLParameters({
        queryParameter: {
          attributeFilter: "SMID > 0",
          fields: ["名称", "位置"],
        },
        // datasetNames: ["长江干线预览:干线分局"],
        datasetNames: ["DATASOURCE_V1:长江干线分局230808"],
      });


      new L.supermap.FeatureService(
        window.SUPER_GIS_SPACE.level_1_Map
      ).getFeaturesBySQL(sqlParam_fenj, (serviceResult) => {
        console.log(serviceResult, 'serviceResult')

        let geojsonlayer_all = L.geoJSON(serviceResult.result.features, {
          style: function () {
            return {
              weight: 10,
              color: "#ffd700",
              fill: true,
              fillColor: "#ffd700",
              opacity: 0,
              fillOpacity: 0,
              renderer: myRenderer,
              className: "SelfSVGClass",
            };
          },
          onEachFeature: ((feature, layer) => {
            // console.log(feature); //对每个小块进行定义
            // let popupContent = this.buildweatherinfo(feature.properties);
            // if (feature.properties) {
            //   console.log(popupContent);
            //   layer.bindPopup(feature.properties);
            // } 
            let id = null;
            layer.on({
              //鼠标移入方法
              mouseover: ((e) => {
                let name = e.target.feature.properties.名称.split("航道", 2)[0];
                this.HeightEchart(name);
                for (let i = 0; i < this.cities.length; i++) {
                  if (this.cities[i].name == name) {
                    this.cities[i].isMove = true;
                  }
                }
                //点击的时候给每个layer的name赋值，如果为空就有鼠标移上去的效果，如果不为空就无鼠标 
                //移入的效果
                if (e.target.name == undefined) {
                  layer.setStyle({
                    opacity: 1,
                    fillOpacity: 0.2,
                  });
                }

                id = e.target.feature.id;
                if (!L.Browser.ie && !L.Browser.opera) {
                  layer.bringToFront();
                }
              }),
              //鼠标移出方法
              mouseout: ((e) => {
                if (e.target.name == undefined) {
                  let name = e.target.feature.properties.名称.split("航道", 2)[0];
                  for (let i = 0; i < this.cities.length; i++) {
                    this.cities[i].isMove = false;
                  }
                  this.LeaveHeightEchart(name)
                  layer.setStyle({
                    opacity: 0,
                    fillOpacity: 0,
                  })
                }
              }),

            });
          })
        });

        this.slideGroup.addLayer(geojsonlayer_all);

        let cjs_geojson = [];
        for (let i in this.hdcdfj) {
          let cjs_json_obj = [];
          for (let j in this.hdcdfj[i][3]) {
            cjs_json_obj.push(
              serviceResult.result.features.features[this.hdcdfj[i][3][j]]
            );
          }
          cjs_geojson.push(cjs_json_obj);
        }
        this.hdfj_json = cjs_geojson;
      });
    },
    buildweatherinfo(feature) {
      let str = [];
      str.push("<h4 >长江航段数据" + "</h4><hr>");
      str.push("<p>名称：" + feature.名称 + "</p>");
      str.push("<p>位置：" + feature.位置 + "</p>");
      return str;
    },
    // 添加局的名称以及地点
    // DemarcationPoint
    addOfficeNameAndPos() {
      const sqlParam = new L.supermap.GetFeaturesBySQLParameters({
        queryParameter: {
          attributeFilter: "SMID > 0",
        },
        datasetNames: ["长江干线预览:标签位置"],
      });

      new L.supermap.FeatureService(
        window.SUPER_GIS_SPACE.urlOfL1LeafletBaseMapService
      ).getFeaturesBySQL(sqlParam, (serviceResult) => {
        let result = serviceResult.result.features.features;
        result.forEach((v) => {
          let point = L.latLng(
            v.geometry.coordinates[1],
            v.geometry.coordinates[0]
          );
          let marker = L.marker(point, {
            icon: L.divIcon({
              className: "level-one-divicon",
              html: `
                  <div class="level-one-divicon-point">
                  </div>
                  <div class="level-one-divicon-content">${v.properties["名称"]}</div>
                  `,
              iconSize: [30, 70],
              iconAnchor: [0, 0],
            }),
          });
          marker.addTo(LeafletMapIns);
        });
      });

      // 局分界点
      const sqlParam_jufj = new L.supermap.GetFeaturesBySQLParameters({
        queryParameter: {
          attributeFilter: "SMID > 0",
        },
        datasetNames: ["长江干线预览:局分界点"]
      });

      const tempArrs = [];
      new L.supermap.FeatureService(
        window.SUPER_GIS_SPACE.urlOfL1LeafletBaseMapService
      ).getFeaturesBySQL(sqlParam_jufj, (serviceResult) => {
        let result = serviceResult.result.features.features;
        result.forEach((v) => {
          let point = L.latLng(
            v.geometry.coordinates[1],
            v.geometry.coordinates[0]
          );
          let marker1 = L.marker(point, {
            icon: L.divIcon({
              className: "my-div-icon-point",
              html: `
                  <div class="my-div-icon-point">
                  </div>
                  `,
              iconSize: [10, 10],
              iconAnchor: [0, 0],
            }),
          });
          tempArrs.push(marker1);
        });
        DemarcationPoint = L.layerGroup(tempArrs).addTo(LeafletMapIns);
      });
    },
    addHeatMapLayer() {
      if (HeatMapLayer) {
        return;
      }
      Api.getHotMapData().then((res) => {
        /*  const arr = res.map(v => {
           return [v.lat, v.lng, v.number]
         })
         // 计算最大值
         const maxObj = LodashMaxBy(res, (o) => o.number || 0); */

        let res1 = LodashSortBy(res, (o) => o.lng || 0);
        let res_fz = Lodashchunk(res1, 1500);
        let jsnumber = null;
        let zong = [];
        for (let i = 0; i < res_fz.length; i++) {
          let fz = res_fz[i];
          let fz_max = LodashMaxBy(fz, (o) => o.number || 0);
          let fz_min = LodashMinBy(fz, (o) => o.number || 0);
          let arr1 = fz.map((v) => {
            jsnumber =
              (v.number - fz_min.number) / (fz_max.number - fz_min.number);
            return [v.lat, v.lng, jsnumber];
          });
          zong = zong.concat(arr1);
        }
        HeatMapLayer = L.heatLayer(zong, {
          max: 1,
          radius: 4,
          blur: 1,
          gradient: {
            0.1: "#0000ff",
            // 0.4: '#ffeb3b',
            0.2: "#00ff00",
            0.3: "#ff0000",
            0.4: "#471f8e",
          },
        });
        HeatMapLayer.addTo(LeafletMapIns);
        // 监听屏幕的缩放级别
        LeafletMapIns.on("zoomend", (e) => {
          const scale = e.target.getZoom();
          const ScaleOptions = {
            7: [4, 1],
            8: [8, 1],
            9: [12, 1],
            10: [16, 1],
          };
          HeatMapLayer.setOptions({
            radius: ScaleOptions[scale][0],
            blur: ScaleOptions[scale][1],
          });
        });
      });
    },
    removeHeatMapLayer() {
      HeatMapLayer && HeatMapLayer.remove();
      HeatMapLayer = null;
    },
    // 添加 WMTS 图层
    addWMTSLayer(url, layerName, tilematrixSet, zIndex) {
      const layer = new L.supermap.WMTSLayer(url, {
        layer: layerName,
        style: "default",
        tilematrixSet,
        format: "image/png",
        requestEncoding: "REST",
      });
      layer.addTo(LeafletMapIns);
    },
    // 返回项目
    goForProject(v) {
      if (!v.isActive) {
        this.doHeighLightArea(v, 8);
      }
      this.leaveHeight(v)

      if (window.parent) {
        const parsedJSONdata = JSON.stringify({
          type: 'bottomTab',
          value: v
        })
        window.parent.postMessage(parsedJSONdata, '*')
      }
    },
    initHeighLight() {
      this.doHeighLightArea(
        {
          name: "武汉",
          officeName: "航道局",
        },
        8
      );
    },
    getlocationcover() {
      let jz_fl = toRaw(this.$refs["WaterLevelScale"].coverwidth);
      let js_later = [];

      for (let i in this.hdcdfj) {
        let js_ls = [];
        for (let j in this.hdcdfj[i][0]) {
          js_ls.push(jz_fl[this.hdcdfj[i][0][j]]);
        }
        js_later.push(LodashSum(js_ls));
      }
      //上面代码已废弃但建议保留，为以航道尺度对准
      //下面为长江各分解像素，计算比例
      js_later = [
        48.9829, 93.49247579, 60.12147726, 111.654172,
        181.9748285, 68.88919269 + 35.96552657 + 58.86894648,
        79.26730484, 85.88782465, 161.9343361,
        101.2760599, 169.8073867, 67.85138148,
        93.18828975, 100.4887548,
      ];
      //计算比例
      js_later = js_later.map(o => {
        return o / (LodashSum(js_later))
      })
      this.divCovData.sum = js_later;

      //计算递增的长度，该值+起点为div光柱的left值
      let jztest = js_later;
      let js_dzl = [];
      for (let i = 0; i < jztest.length; i++) {
        let js_dzll = [];
        for (let j = 0; j < i; j++) {
          js_dzll.push(jztest[j]);
        }
        LodashSum(js_dzll);
        js_dzl.push(LodashSum(js_dzll));
      }
      this.divCovData.sum_dz = js_dzl;
      if (window.innerWidth <= 1920) {
        this.divCovData.qd = ((window.innerWidth + 310) * 8) / 100;
        this.divCovData.zd = ((window.innerWidth - 180) * 89) / 100;
      } else {
        this.divCovData.qd = ((window.innerWidth + 100) * 19) / 100;
        this.divCovData.zd = ((window.innerWidth - 180) * 88) / 100;
      }
    },
    LeaveHeightEchart(name) {
      if (this.featureGroup) {
        this.featureGroup.clearLayers();
      }
      if (!this.$refs["WaterLevelScale"].insOfChart) {
        return;
      }
      if (!window.EchartInsOne) {
        return;
      }
      if (this.hdcdfj[name]) {
        this.$refs["WaterLevelScale"].insOfChart.dispatchAction({
          type: "unselect",
          dataIndex: this.hdcdfj[name][0],
        });
        window.EchartInsOne.dispatchAction({
          type: "downplay",
          name: this.hdcdfj[name][1],
        });
        this.divCover = document.getElementById("Cover");
        this.divCover.style.display = "none";
      }
    },
    HeightEchart(name) {
      if (!this.$refs["WaterLevelScale"].insOfChart) {
        return;
      }
      if (!window.EchartInsOne) {
        return;
      }
      if (this.hdcdfj[name]) {
        this.getlocationcover();
        this.$refs["WaterLevelScale"].insOfChart.dispatchAction({
          type: "select",
          dataIndex: this.hdcdfj[name][0],
        });
        window.EchartInsOne.dispatchAction({
          type: "highlight",
          name: this.hdcdfj[name][1],
        });
        this.$refs["WaterLevelScale"].insOfChart.on("highlight", (e) => {
        });
        //div光柱控制代码
        this.divCover = document.getElementById("Cover");
        this.divCover.style.display = "block";
        this.divCover.style.left = this.cj_qd + (this.divCovData.sum_dz[this.hdcdfj[name][2]]) * (window.innerWidth - (this.cj_qd) * 2 + 30) - 10 + "px";
        this.divCover.style.width =
          this.divCovData.sum[this.hdcdfj[name][2]] * (window.innerWidth - (this.cj_qd) * 2) + "px";
      }
    },
    // 高亮区域
    doHeighLightArea(item, index) {
      if (this.featureGroup) {
        this.featureGroup.clearLayers();
      }
      this.HeightEchart(item.name);
      console.log(item.name, "item.name 1330");
      item.isMove = true;
      if (!LeafletMapIns) {
        return;
      }
      if (TempLayer) {
        LeafletMapIns.removeLayer(TempLayer);
        TempLayer = null;
      }

      const name = item.name + item.officeName;
      //const name = item.name;
      if (!name) {
        return;
      }
      if (!this.hdfj_json) {
        return;
      }
      let TemmpLayer_geojson = {
        type: "FeatureCollection",
        features: this.hdfj_json[index],
      };

      let geojsonlayer = L.geoJSON(TemmpLayer_geojson, {
        style: function () {
          return {
            stroke: false,
            fill: true,
            fillColor: "#ffd700",
            opacity: 1,
            fillOpacity: 0.2,
            renderer: myRenderer,
            className: "SelfSVGClass",
          };
        },
      });

      this.featureGroup.addLayer(geojsonlayer);
      //注释飞行
      if (LeafletMapIns.getZoom() != this.start_zoom) {
        LeafletMapIns.flyToBounds(geojsonlayer.getBounds());
      }

      const sqlParam = new L.supermap.GetFeaturesBySQLParameters({
        queryParameter: {
          attributeFilter: `\"名称\"='${name}'`,
          fields: ["名称", "位置"],
        },
        datasetNames: ["长江干线预览:干线分局"],
      });
    },
    leaveHeight(item) {
      this.LeaveHeightEchart(item.name);
      item.isMove = false;
      if (this.featureGroup) {
        this.featureGroup.clearLayers();
      }
    },
    //根据上中下游去初始化折线图
    initWaterLevelLine() {
      const data = this.swzList;
      const res = data.map((o) => {
        // 根据 swz_id 区分
        const obj = this.allSWData.find((e) => e.swz_id == o.id);
        if (!obj) {
          console.log("水位信息不存在", o.name);
        }
        return LodashMerge({}, o, obj);
      });
      let waterdefalut = res;
      waterdefalut.push({ name: "向家坝出库", scswsd: "" });
      waterdefalut.push({ name: "三峡出库", scswsd: "" });
      waterdefalut.push({ name: "葛洲坝出库", scswsd: "" });
      Api.getDimenOfWaterData().then((res) => {
        let waterOption = res.data.list;
        if (res.data.list.length > 0) {
          if (waterdefalut.length > 0) {
            waterdefalut.map((o, index) => {
              let watername = o.name.split("（")[0].split("(")[0];
              for (let i = 0; i < waterOption.length; i++) {
                if (waterOption[i].fname.includes(watername)) {
                  if (waterOption[i].fname == "汉口") {
                    continue;
                  }
                  if (waterOption[i].fname == "宜昌流量") {
                    continue;
                  }
                  o.scswsd = waterOption[i].fvalue;
                }
              }
            });

          }
        }
        this.waterLevelData = waterdefalut;
        // console.log(waterdefalut);
      });
    },
    toRGB(color, opacity) {
      if (!/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(color)) return;
      const chars = color.split("").splice(1);
      const r = `0x${chars[0]}${chars[1]}`;
      const g = `0x${chars[2]}${chars[3]}`;
      const b = `0x${chars[4]}${chars[5]}`;
      return `rgba(${parseInt(r)},${parseInt(g)},${parseInt(b)},${typeof opacity === "number" ? opacity : "1"
        })`;
    },
    initChartsForLeftDesigned(echartsData, datazoom = false) {
      console.log(echartsData, 'echartsData航标设标数格局统计');
      this.diaTile = echartsData.title;
      let that = this;
      this.leftPanelIsActive = false;
      this.dialogVisible = true;
      this.$nextTick(() => {
        const chartDomP_Type = this.$refs.SecondChartRef;
        ChartIns2 = echarts.init(chartDomP_Type);
        if (chartDomP_Type) {
          this.loading = false;
          let xAxisName = ["宜宾航道局", "泸州航道局", "重庆航道局", "涪陵航道处", "万州航道处", "宜昌航道局", "荆州航道处", "岳阳航道处", "武汉航道局", "九江航道处", "芜湖航道处", "南京航道局", "镇江航道处", "上海航道处"];
          const option = {
            color: echartsData.data.map(single => single.color),
            tooltip: {
              trigger: "axis",
              textStyle: {
                align: "left",
              },
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              data: echartsData.data.map(single => single.name),
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: "16"
              },
            },
            grid: {
              left: "0%",
              right: "0%",
              bottom: "0%",
              top: "20%",
              containLabel: true,
            },
            yAxis: {
              type: "value",
              name: "单位（座）",
              nameTextStyle: {
                color: "#ffffff",
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "rgba(133,194,255,.5)",
                },
              },
              boundaryGap: ["0", "0%"],
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(58,112,197,.12)",
                },
              },
              splitNumber: 2,
              axisLabel: {
                color: "#ffffff",
                show: false,
              },
              splitArea: {
                show: false,
                areaStyle: {
                  color: "rgba(58,112,197,.1)",
                },
              },
            },
            xAxis: [{
              type: "category",
              data: xAxisName,
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "rgba(133,194,255,.5)",
                },
              },
              axisLabel: {
                color: "#ffffff",
                interval: 0,
                width: 0,
                overflow: "truncate",
                ellipsis: "...",
                shwo: false,
              },
            }],
            series: echartsData.data.map(single => {
              return {
                name: single.name,
                type: "bar",
                top: -50,
                barMinWidth: 10,
                barMaxWidth: 15,
                label: {
                  show: true,
                  position: "top",
                  borderColor: "transparent",
                  borderWidth: 0,
                  fontSize: 16,
                  color: "#fff",
                  shadowColor: "transparent",
                  fontFamily: "YouSheBiaoTiHei",
                },
                itemStyle: {
                  color: function () {
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      { offset: 0, color: single.color },
                      { offset: 0.985, color: that.toRGB(single.color, 0.1) },
                      { offset: 0.985, color: that.toRGB(single.color, 1) },
                      { offset: 1, color: that.toRGB(single.color, 1) },
                    ]);
                  },
                },
                data: single.data.map(v => v.value),
              }
            }),
            dataZoom: [
              {
                type: "slider",
                show: datazoom,
                height: 10,
                start: datazoom ? 45 : 0, //位置
                end: datazoom ? 75 : 100,
                moveHandleSize: 5,
                textStyle: { color: "#fff" },
              },
            ],
          };
          option && ChartIns2.setOption(option, true);
        }
      });
    },
    initChartsForLeftReal(echartsArr, datazoom = false) {
      let colorIndex = echartsArr.index || 0;
      this.diaTile = echartsArr.title;
      let that = this;
      this.leftPanelIsActive = false;
      this.dialogVisible = true;
      this.$nextTick(() => {
        const chartDomP_Type = this.$refs.SecondChartRef;
        ChartIns2 = echarts.init(chartDomP_Type);
        const tempObj = {};
        echartsArr.data.forEach((item) => {
          tempObj[item.name] = item.value || 0
        });
        that.craeteEcharts.forEach((item) => {
          item.value = tempObj[item.name]
        });
        if (chartDomP_Type) {
          //
          let seriesData = that.craeteEcharts.map((v) => v.value);
          this.loading = false;
          let xAxisName = that.craeteEcharts.map((v) => v.name);
          const option = {
            color: that.color,
            tooltip: {
              trigger: "axis",
              textStyle: {
                align: "left",
              },
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              align: "right",
              right: 0,
              itemHeight: 8,
              itemWidth: 20,
              show: false,
              textStyle: {
                color: "#fff",
              },
            },
            grid: {
              left: "0%",
              right: "0%",
              bottom: "0%",
              top: "10%",
              containLabel: true,
            },
            yAxis: {
              type: "value",
              name: "单位（座）",
              nameTextStyle: {
                color: "#ffffff",
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "rgba(133,194,255,.5)",
                },
              },
              boundaryGap: ["0", "0%"],
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(58,112,197,.12)",
                },
              },
              splitNumber: 2,
              axisLabel: {
                color: "#ffffff",
                show: false,
              },
              splitArea: {
                show: false,
                areaStyle: {
                  color: "rgba(58,112,197,.1)",
                },
              },
            },
            xAxis: [{
              type: "category",
              data: xAxisName,
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "rgba(133,194,255,.5)",
                },
              },
              axisLabel: {
                color: "#ffffff",
                interval: 0,
                width: 0,
                overflow: "truncate",
                ellipsis: "...",
                shwo: false,
              },
            }],
            series: [{
              type: "bar",
              top: -50,
              barMinWidth: 10,
              barMaxWidth: 15,
              label: {
                show: true,
                position: "top",
                borderColor: "transparent",
                borderWidth: 0,
                fontSize: 16,
                color: "#fff",
                shadowColor: "transparent",
                fontFamily: "YouSheBiaoTiHei",
              },
              itemStyle: {
                color: function (params) {
                  return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    { offset: 0, color: that.color[colorIndex] },
                    { offset: 0.985, color: that.toRGB(that.color[colorIndex], 0.1) },
                    { offset: 0.985, color: that.toRGB(that.color[colorIndex], 1) },
                    { offset: 1, color: that.toRGB(that.color[colorIndex], 1) },
                  ]);
                },
              },
              data: seriesData,
            }],
            dataZoom: [
              {
                type: "slider",
                show: datazoom,
                height: 10,
                start: datazoom ? 45 : 0, //位置
                end: datazoom ? 75 : 100,
                moveHandleSize: 5,
                textStyle: { color: "#fff" },
              },
            ],
          };
          option && ChartIns2.setOption(option, true);
          // this.loading = false;
        }
      });
    },
    initbureau(obj) {
      var sqlParameter = {
        datasetNames: ["长江干线预览:局分界点"],
        getFeatureMode: "SQL",
        queryParameter: {
          attributeFilter: "1=1",
        },
      };
      var url =
        "/iserver/services/data-ChangJiangGanXianGaiLan/rest/data/featureResults.geojson?returnContent=true";
      var queryData = JSON.stringify(sqlParameter);
      axios.post(url, queryData).then((res) => {
        console.log(res.data, obj, "长江武汉段各局");
        let fz_max = LodashMaxBy(obj, (o) => o.value || 0).value;
        let fz_min = LodashMinBy(obj, (o) => o.value || 0).value;
        let BL = Number((fz_min / fz_max).toFixed(2));
        // console.log(fz_max, fz_min, BL, "ooooo");
        let dataArr = res.data.features;
        for (let i = 0; i < dataArr.length; i++) {
          if (dataArr[i + 1]) {
            let coor1 = Number(
              (
                (dataArr[i].geometry.coordinates[1] +
                  dataArr[i + 1].geometry.coordinates[1]) /
                2
              ).toFixed(5)
            );
            let coor0 = Number(
              (
                (dataArr[i].geometry.coordinates[0] +
                  dataArr[i + 1].geometry.coordinates[0]) /
                2
              ).toFixed(1)
            );
            dataArr[i].newCoor = [coor0, coor1];
            let latlngs = [
              [coor1, coor0 - 0.1],
              [coor1 + 1, coor0 - 0.1],
              [coor1 + 1, coor0 + 0.1],
              [coor1, coor0 + 0.1],
            ];
            L.polygon(latlngs, { color: "red" }).addTo(LeafletMapIns);
          }
        }
        let newObj = {};
        // obj.forEach(itm => {
        //     newobj[item.name.substring]
        // })
        // console.log(dataArr, obj, 'dataArr');
      });
    },
    goForHeightLight(item) {
      console.log(item);
    },
    closeMenu(e) {
      // 当点击到伸缩控制器时候 执行下面的 handleClickIconMenu
      if (e.target.classList.contains("level-one-only")) {
        return
      }
      this.leftPanelIsActive = false;
    },
    // 伸缩控制器的逻辑
    handleClickIconMenu() {
      setTimeout(() => {
        this.leftPanelIsActive = !this.leftPanelIsActive;
      }, 100);
    },
  },
  //
};
</script>

<template>
  <div id="data-init" class="area">
    <div class="left-panel" :class="[leftPanelIsActive ? 'active' : '']" v-click-outside="(e) => { closeMenu(e) }">
      <!-- 统计模块 -->
      <count-and-tree-component></count-and-tree-component>
    </div>
    <div class="left-panel-controller level-one-only" :class="[leftPanelIsActive ? 'active' : '']"
      @click="handleClickIconMenu">
    </div>

    <div class="top-wrapper">
      <div class="top-and-map">
        <div class="left-item"></div>
        <div class="right-item">
          <!-- 顶部 -->
          <div class="chart-wrapper-top">
            <div class="river-area"></div>
            <!-- 水位 -->
            <water-level-base ref="HtBgLines" :result-data="waterLevelData" style="height: 100%">
            </water-level-base>
          </div>
          <!-- 地图 -->
          <div class="map-wrapper">
            <div id="Map-ChangJiang" v-loading="dataIsRequesting" element-loading-background="rgba(0,0,0,0.1)"></div>
            <!-- 图例 -->
            <SupermapLegend v-if="showLegend" :legendTitle="'状态'" :legendData="legendData" :style="{
              right: '10px',
              left: 'initial',
              bottom: '300px'
            }">
            </SupermapLegend>
            <div id="Chart-Center">
              <water-level-scale ref="WaterLevelScale" :result="hdtData"></water-level-scale>
            </div>
            <div class="func-area"></div>
          </div>
        </div>
      </div>

      <div class="cities-wrapper">
        <div class="item" v-for="(item, index) in cities" @click="goForProject(item)"
          @mouseenter="doHeighLightArea(item, index)" @mouseleave="leaveHeight(item)" :key="index"
          :class="{ active: item.isActive }" v-bind:class="{ movecity: item.isMove }">
          <p class="name">{{ item.name }}</p>
          <p class="office">{{ item.officeName }}</p>
        </div>
      </div>
    </div>

    <el-dialog :modal="false" top="25vh" v-model="dialogVisible" :title="diaTile" width="calc(100% - 40px)" draggable
      style="opacity: 0.9; height: calc(75vh - 90px)">
      <div class="dialog-inner" v-loading="loading" element-loading-background="rgba(18, 25, 58, 0.8)">
        <div class="main-chart-ref" ref="SecondChartRef" style="height: 100%"></div>
      </div>
    </el-dialog>
  </div>
  <span id="Cover"></span>
</template>
<style>
#Cover {
  position: absolute !important;
  background-color: aquamarine;
  opacity: 0.1;
  top: 4vh;
  height: calc(100vh - 150px) !important;
  width: 2vh;
  display: none;
  left: calc(19vh + 17.6vh);
  z-index: 99999999;
  pointer-events: none;
}

.level-one-divicon-point {
  background-color: transparent;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

.my-div-icon-point {
  background-color: yellow;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

.level-one-divicon-content {
  position: relative;
  left: -10px;
  bottom: 105px;
  width: 100%;
  height: 100%;
  font-family: "微软雅黑", "YouSheBiaoTiHei", "Courier New", Courier, monospace;
  font-weight: bolder;
  color: #ffffff;
  font-size: 20px;
  /* text-shadow: 0 0 0.5em #ffec3d, 0 0 0.2em #a0d911; */
  text-align: center;
  padding: 5px;
  border-radius: 100px;
  background-image: linear-gradient(to bottom, #278db8, #0c435a);
}

.SelfSVGClass {
  filter: drop-shadow(0 0 0 #ffffff);
  stroke-dasharray: 10, 5;
  stroke-dashoffset: 0;
  stroke: #ffd700;
  stroke-width: 2px;
  animation: moving-line 3s linear infinite;
}

@keyframes moving-line {
  50% {
    filter: drop-shadow(0 0 5px #ffffff);
  }

  100% {
    stroke-dashoffset: 30px;
  }
}
</style>
<style scoped lang="less">
@bg-color: rgba(12, 67, 90, 1);
@border-radius: 10px;

.area {
  position: fixed;
  width: 100%;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 401;

  &>.left-panel-controller {
    cursor: pointer;
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 500;
    left: 0;
    top: 10px;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex;
    justify-content: flex-end;
    transition: all 0.3s;
    background-image: url(@/assets/images/icon-l1-right.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    &.active {
      background-image: url(@/assets/images/icon-l1-left.png);
      transform: translateX(440px);
    }

    &>.el-icon {
      margin-right: 5px;
    }
  }

  &>.leftIsarea {
    position: absolute;
    z-index: 500;
    left: 0;
    top: 10px;
    bottom: 0;
    width: 430px;
    border-top-left-radius: @border-radius;
    border-bottom-left-radius: @border-radius;
    height: calc(100% - 20px);
    overflow-y: auto;
    background-color: rgba(17, 50, 69, 0.8);
    transition: transform 0.3s ease-in-out;
  }

  &>.left-panel {
    position: absolute;
    z-index: 500;
    left: 0;
    top: 10px;
    bottom: 0;
    width: 430px;
    border-top-left-radius: @border-radius;
    border-bottom-left-radius: @border-radius;
    height: calc(100% - 20px);
    overflow-y: auto;
    background-color: rgba(37, 46, 65, 0.85);
    transform: translateX(-500px);
    transition: transform 0.3s ease-in-out;

    &.active {
      transform: translateX(10px);
    }
  }

  &>.top-wrapper {
    display: flex;
    flex-direction: column;
    position: absolute;
    justify-content: space-between;
    padding: 10px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid #20496f;
    border-radius: @border-radius;
    background-image: url('@/assets/images/map-texture@1x.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;

    &>.top-and-map {
      flex: 1;
      display: flex;
      justify-content: space-between;

      &>.left-item {
        width: 0%;
        background-color: @bg-color;
        border-radius: @border-radius;
      }

      &>.right-item {
        width: 100%;
        background-color: @bg-color;
        background-color: rgba(86, 102, 132, 0.35);
        border-radius: @border-radius;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &>.map-wrapper {
          position: relative;
          height: calc((100% - 100px) * 0.9);
          border-radius: @border-radius;
          overflow: hidden;

          &>.func-area {
            position: absolute;
            right: 50px;
            top: 10px;
            z-index: 500;
            border-radius: 3px;
            color: #eee;
            padding: 0 4px;
            background-color: rgba(104, 184, 227, 0.6);
            user-select: none;
          }
        }
      }
    }

    // 城市
    &>.cities-wrapper {
      display: flex;
      width: 100%;
      background-color: rgba(101, 127, 147, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.5);
      border-radius: 10px;
      padding: 0;
      margin-top: 20px;

      &>.item {
        text-align: center;
        flex: 1;
        padding: 5px 0;
        position: relative;
        cursor: pointer;
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;

        &.active,
        &.movecity {
          border-top: 1px solid #42F4FF;
          border-bottom: 1px solid #42F4FF;
          background-color: rgba(66, 244, 255, 0.1);
        }

        & .name {
          font-size: 20px;
          color: #42F4FF;
        }

        & .office {
          font-size: 14px;
          color: #fff;
          display: inline-block;
          width: 100%;
          line-height: 1;
        }
      }
    }
  }
}

// 顶部图表
.chart-wrapper-top {
  position: relative;
  top: 2vh;
  min-height: 100px;
  height: 150px;

  &>.river-area {
    z-index: 100;
    position: absolute;
    top: 0;
    text-align: center;
    transform: translateX(-50%);
    left: 50%;
  }
}

// 中间地图
#Map-ChangJiang {
  height: 75%;
  border-radius: @border-radius;
  border: 3px solid #6B87A2;
}

#Chart-Center {
  height: 25%;
  position: relative;
}

.dialog-inner {
  // height: 500px;
  height: 100%;
}

/deep/ .el-dialog__body {
  height: calc(100% - 56px);
  padding: 0;
}
</style>
